<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>🐼 首页</title>
    {% load static %}
    <script src="{% static 'jquery-3.4.1/jquery.min.js' %}"></script>
    <link href="{% static 'bootstrap-3.3.7/css/bootstrap.min.css' %}" rel="stylesheet">
    <script src="{% static 'bootstrap-3.3.7/js/bootstrap.min.js' %}"></script>
    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

    {# 左侧边栏 #}
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}"/>
    <link href="{% static 'plugins/css/icons.min.css' %}" rel="stylesheet" type="text/css"/>
    <script src="{% static 'js/sidebar.js' %}"></script>
    {# 中间手风琴 #}
    <link rel="stylesheet" href="{% static 'css/organ.css' %}">
    <script src="{% static 'js/organ.js' %}"></script>
    {# 彩蛋部分 #}
    <link rel="stylesheet" href="{% static 'css/egg.css' %}">
    <link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}"> <!--符号字体-->

    <style>
        .article {
            left: 3%;
            margin-top: 30px;
        }

        .span1 {
            margin-right: 10px;
        }

        .article_footer {
            margin-right: 5px;
        }

        .right-body {
            width: 351px;
            height: 800px;
            position: relative;
            border-width: 5px;
            right: -13px;
        }

        .right-body2::before {
            content: "";
            height: 700px;
            width: 351px;
            background-image: url("{% static '/img/24.jpg' %}");
            opacity: 0.2;
            z-index: -1;
            background-size: cover;
            position: absolute;
            border-radius: 13px;
        }

        .img_hand {
            height: 100px;
            width: 100px;
            border: 3px solid #f5eded;
            border-radius: 50%;
            background-image: url("{% static 'img/organ/t3.png' %}");
            background-size: cover;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 25px;
        }

        .img_hand:hover {
            background-image: url("{% static 'img/organ/t4.png' %}");
        }

        .name_title {
            font-family: 华文隶书;
            font-size: 23px;
            color: #020101;
            position: absolute;
            margin: 0 auto;
            left: 0;
            right: 0;
            top: 150px;
            text-align: center;
        }

        .text {
            width: 351px;
            font-family: 华文隶书;
            position: absolute;
            margin: 0 auto;
            top: 238px;
        }

        .LogoName {
            font-family: 华文行楷;
        }

        .slide {
            left: 3%;
        }

    </style>
</head>
<body style="background-color: #fdfde9">

<!-- 彩蛋模态框内容,必须放在body下,不然会被遮盖 -->
<div class="modal fade father-modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class='box'>
            <div class='sun'>
                <img src="{% static 'img/egg/sun.png' %}" alt="" class='sunbody'>
                <img src="{% static 'img/egg/eye.png' %}" alt="" class='eye'>
            </div>
            <p>彩蛋正在加载 请稍等...</p>
        </div>
    </div>
</div>


<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#" style="position: relative">
                <img src="{% static 'img/icon/star.png' %}" width="40px" style="position: absolute;top: 5px">
            </a>
        </div>
        <div class="navbar-header" style="margin-left: 35px">
            <a class="navbar-brand" href="#" style="position: relative">
                Shawn
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                {% if request.user.is_authenticated %}
                    <li class="active"><a href="/{{ request.user.username }}/">我的站点 <span
                            class="sr-only">(current)</span></a></li>
                {% else %}
                    <li class="active"><a href="{% url 'login_name' %}">我的站点 <span
                            class="sr-only">(current)</span></a></li>
                {% endif %}
                <li id="egg">
                    <!-- 彩蛋模态框点击按钮 -->
                    <a href="#" data-toggle="modal" data-target="#myModal">彩蛋</a>
                </li>
            </ul>
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入关键字">
                </div>
                <button type="submit" class="btn btn-default">本站搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                <li><a id="btn1">站点惊喜</a></li>
                {% if not request.user.is_authenticated %}
                    <li><a href="{% url 'login_name' %}">登入</a></li>
                {% endif %}

                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">更多操作<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url 'passwd_change_name' %}">修改密码</a></li>
                        <li><a href="{% url 'add_article_name' %}">发表文章</a></li>
                        <li><a href="{% url 'backed_name' %}">后台管理</a></li>
                        <li role="separator" class="divider"></li>
                        {% if not request.user.is_authenticated %}
                            <li class="a2 logout1" style="display: none"><a href="#">退出登入</a></li>
                        {% else %}
                            <li class="a2 logout1"><a href="#">退出登入</a></li>
                        {% endif %}
                    </ul>
                </li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>


<div class="container-fluid">
    <div class="row">
        <div class="col-md-2">
            {#侧边栏#}
            <div class="page" id="app">
                <div class="nav-left" v-show="navLeftFlag" ref="navLeft">
                    <div class="LogoName">
                        <span style="font-size: 23px;">🌟</span>Shawn
                    </div>
                    <div class="navDiv" style="background-color: white;width: 255px">
                        <div class="navName">导航</div>
                        <div class="nav-list">
                            <ul>
                                <li class="nav-tab a_active waves-effect">
                                    <a href="#" class="li-a active" target="iframe"><i class='bx bx-home-smile'></i> 主页
                                        <span class="badge badge-pill badge-primary float-right"></span>
                                    </a>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a" target="iframe"><i
                                            class='bx bx-layer'></i> 最新文章
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        {% for article8 in article8_list %}
                                            <a href="/{{ article8.blog.user.username }}/articles/{{ article8.id }}.html"
                                               class="li-a-a">{{ article8.title }}</a>
                                        {% endfor %}
                                        <a href="#" target="iframe">更多...</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-cog' target="iframe"></i>
                                        热门站点标签
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        {% for tag5 in tag5_list %}
                                            <a href="/{{ tag5.blog.user.username }}/tag/{{ tag5.id }}.html"
                                               class="li-a-a">{{ tag5.name }}---{{ tag5.blog.user.username }}</a>
                                        {% endfor %}
                                        <a href="#" target="iframe">更多...</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-buildings'
                                                                                 target="iframe"></i> 最新评论
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        {% for comment8 in comment8_list %}
                                            <a href="/{{ comment8.articles.blog.user.username }}/articles/{{ comment8.articles.id }}.html"
                                               class="li-a-a">{{ comment8.articles.title }}----{{ comment8.content }}({{ comment8.user.username }})</a>
                                        {% endfor %}
                                        <a href="#" target="iframe">更多...</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 热门文章分类
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        {% for category5 in category5_list %}
                                            <a href="/{{ category5.blog.user.username }}/category/{{ category5.id }}.html"
                                               class="li-a-a">{{ category5.name }}---{{ category5.blog.user.username }}</a>
                                        {% endfor %}
                                        <a href="#" target="iframe">更多...</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit' target="iframe"></i>
                                        友情链接
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        <a href="https://www.cnblogs.com/songhaixing/" class="li-a-a">猪八戒</a>
                                        <a href="http://124.71.206.179:8000" class="li-a-a">顺悟空</a>
                                        <a href="https://blog.csdn.net/songhaixing2?spm=1001.2101.3001.5343"
                                           class="li-a-a">土行孙</a>
                                        <a href="#" class="li-a-a" target="iframe">天行者</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 奇闻趣谈
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        <a href="#" class="li-a-a" target="iframe">猪八戒要吃肉</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 世界和平组织
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        <a href="#" class="li-a-a" target="iframe">叙利亚</a>
                                    </div>
                                </li>
                                <li class="nav-tab nav-ul">
                                    <a href="javascript:void[0]" class="li-a"><i class='bx bx-edit'></i> 联系我
                                        <i class='bx bx-chevron-right' style="float: right;"></i></a>
                                    <div class="nav-box">
                                        <a href="#" class="li-a-a" target="iframe">110</a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="nav-right" ref="navRight">
                    <div class="nav-top">
                        <button type="button" class="btn btn-primary btn-sm hiddenBtn btn2" style="line-height: 10px;"
                                @click="isShowLeft">
                            <i class="bx bx-grid-alt" style="font-size: 16px;"></i>
                        </button>
                    </div>
                    <div class="content-page" ref="cPage">
                        <iframe name="iframe" width="100%" height="100%" frameborder="0" src="#"></iframe>
                    </div>
                </div>
            </div>
        </div>
        {#中间#}
        <div class="col-md-7">
            <div class="row">
                <div class="col-md-12" style="height: 300px">
                    {# 手风琴#}
                    <div id="container">
                        <div class="slide slide1"><span>海</span></div>
                        <div class="slide slide2"><span>棉</span></div>
                        <div class="slide slide3"><span>宝</span></div>
                        <div class="slide slide4"><span>宝</span></div>
                        <div class="slide slide5"><span>吃</span></div>
                        <div class="slide slide6"><span>大</span></div>
                        <div class="slide slide7"><span>汉</span></div>
                        <div class="slide slide8"><span>堡</span></div>
                    </div>

                    {# 轮播图 #}
                    {#                    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">#}
                    {#                        <!-- Indicators -->#}
                    {#                        <ol class="carousel-indicators">#}
                    {#                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>#}
                    {#                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>#}
                    {#                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>#}
                    {#                        </ol>#}
                    {#                        <!-- Wrapper for slides -->#}
                    {#                        <div class="carousel-inner" role="listbox" style="height: 300px">#}
                    {#                            <div class="item active">#}
                    {#                                <img src="{% static 'img/20.jpg' %}" alt="...">#}
                    {#                                <div class="carousel-caption">#}
                    {#                                    派大星#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                            <div class="item">#}
                    {#                                <img src="{% static 'img/22.jpg' %}" alt="...">#}
                    {#                                <div class="carousel-caption">#}
                    {#                                    吃海绵#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                            <div class="item">#}
                    {#                                <img src="{% static 'img/13.jpg' %}" alt="...">#}
                    {#                                <div class="carousel-caption">#}
                    {#                                    吃海绵#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                            <div class="item">#}
                    {#                                <img src="{% static 'img/12.jpg' %}" alt="...">#}
                    {#                                <div class="carousel-caption">#}
                    {#                                    吃章鱼#}
                    {#                                </div>#}
                    {#                            </div>#}
                    {#                        </div>#}
                    {#                        <!-- Controls -->#}
                    {#                        <a class="left carousel-control" href="#carousel-example-generic" role="button"#}
                    {#                           data-slide="prev">#}
                    {#                            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>#}
                    {#                            <span class="sr-only">Previous</span>#}
                    {#                        </a>#}
                    {#                        <a class="right carousel-control" href="#carousel-example-generic" role="button"#}
                    {#                           data-slide="next">#}
                    {#                            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>#}
                    {#                            <span class="sr-only">Next</span>#}
                    {#                        </a>#}
                    {#                    </div>#}

                </div>
                {% for article in page.object_list %}
                    <div class="col-md-12 article">
                        <div class="media">
                            <h5 class="media-heading"><a
                                    href="/{{ article.blog.user.username }}/articles/{{ article.id }}.html">{{ article.title }}</a>
                            </h5>
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object" src="/media/{{ article.blog.user.head }}"
                                         style="width: 65px;height: 65px">
                                </a>
                            </div>
                            <div class="media-body">
                                <p>{{ article.description }}</p>
                            </div>
                            <div style="margin-top: 10px"> <!-- 作者名,点赞点踩,评论,时间-->
                                <span class="article_footer span1"><a
                                        href="/{{ article.blog.user.username }}/">{{ article.blog.user.username }}</a></span>
                                <span class="article_footer">{{ article.update_time|date:'Y-m-d H:i:s' }}</span>
                                <span class="article_footer"><i
                                        class="fa fa-thumbs-o-up fa-lg"></i>&nbsp;{{ article.up_num }}</span>
                                <span class="article_footer"><i
                                        class="fa fa-thumbs-o-down fa-lg"></i>&nbsp;{{ article.down_num }}</span>
                                <span class='article_footer'><i
                                        class="fa fa-commenting-o fa-lg"></i>&nbsp;{{ article.comment_num }}</span>
                            </div>
                        </div>
                    </div>
                {% endfor %}
                {# 分页按钮 #}
                <div class="col-md-12">
                    <div class="text-center">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                {# 判断当前页是否有上一页(针对向左的箭头按钮) #}
                                {% if page.has_previous %}
                                    <li>
                                        {# 如果有上一页就跳到上一页 #}
                                        <a href="/home/?page_num={{ page.previous_page_number }}"
                                           aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                {% else %}
                                    {# 如果没有上一页,就将该按钮禁用 #}
                                    <li class="disabled">
                                        <a href="" aria-label="Previous">
                                            <span aria-hidden="true">&laquo;</span>
                                        </a>
                                    </li>
                                {% endif %}

                                {# 从页码列表中循环取出页码与当前页做对比 #}
                                {% for foo in page_range %}
                                    {% if current_page == foo %}
                                        {# 如果是当前页,就将当前页按钮变成激活状态(蓝色) #}
                                        <li class="active"><a href="/home/?page_num={{ foo }}">{{ foo }}</a></li>
                                    {% else %}
                                        {# 如果不是则不变色 #}
                                        <li><a href="/home/?page_num={{ foo }}">{{ foo }}</a></li>
                                    {% endif %}

                                {% endfor %}

                                {# 判断但前页是否有下一页(针对向右的箭头按钮) #}
                                {% if page.has_next %}
                                    <li>
                                        {# 如果有则跳转到下一页 #}
                                        <a href="/home/?page_num={{ page.next_page_number }}" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                {% else %}
                                    {# 没有下一页则将按钮禁用 #}
                                    <li class="disabled">
                                        <a href="" aria-label="Next">
                                            <span aria-hidden="true">&raquo;</span>
                                        </a>
                                    </li>
                                {% endif %}

                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>

        {#右侧边#}
        <div class="col-md-3">
            <div class="right-body">
                <div class="right-body2">
                    <div class="img_hand"></div>
                    <div class="name_title">
                        <p>Shawn派大星</p>
                    </div>
                    <div class="text text-center">
                        <p>去年今日此门中 人面桃花相映红</p>
                        <p>人面不知何处去 桃花依旧笑春风</p>
                        <p>唐--崔护</p>
                        <p>《题都城南庄》</p>
                        <p>掬水月在手 弄花香满衣</p>
                        <p>--于良史《春山夜月》</p>
                        <p>疏影横斜水清浅 暗香浮动月黄昏</p>
                        <p>--林逋《山园小梅·其一》</p>
                        <p>人间四月芳菲尽 山寺桃花始盛开</p>
                        <p>--白居易《大林寺桃花》</p>
                        <p>平生不会相思 才会相思 便害相思</p>
                        <p>--徐再思《折桂令·春情》</p>
                    </div>
                    <div class="right-foot">

                    </div>
                </div>
            </div>
        </div>

    </div>
</div>


{#侧边栏#}
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript">
    $(function () {
        let navflag = false;
        $('.nav-tab').click(function () {
            $(this).siblings().each(function () {
                $(this).removeClass('a_active');
                $(this).find('.nav-box').css('height', '0')
                //关闭右侧箭头
                if ($(this).attr('class').indexOf('nav-ul') != -1) {
                    $(this).find('.bx-chevron-right').css('transform', 'rotateZ(0deg)')
                    $(this).find('.bx-chevron-right').css('transition', 'all .5s')
                    $(this).removeClass('nav-show')
                }
            })
            //当前选中
            $(this).addClass('a_active')
            $(this).find('.li-a').addClass('active')
            // 打开右侧箭头
            $(this).find('.bx-chevron-right').css('transform', 'rotateZ(90deg)')
            $(this).find('.bx-chevron-right').css('transition', 'all .5s')
            $(this).addClass('nav-show')
        })
        /* 二级菜单a点击事件 */
        $(".li-a-a").click(function () {
            $(".li-a-a").each(function () {
                $(this).removeClass('active-li-a');
            })
            $(this).addClass('active-li-a');
        })

    })
    const vue = new Vue({
        el: '#app',
        data: {
            navLeftFlag: true
        },
        methods: {
            isShowLeft() {
                if (this.navLeftFlag) {
                    this.$refs.navRight.style.paddingLeft = '0px'
                    this.$refs.cPage.style.left = '0px';
                    this.navLeftFlag = false;
                } else {
                    this.$refs.navRight.style.paddingLeft = '240px';
                    this.$refs.cPage.style.left = '240px';
                    this.navLeftFlag = true;
                }
            }
        }
    })

    {# 退出登入 #}
    $('.logout1').click(function () {
        swal({
            title: '是否退出!',
            icon: "warning",
            buttons: ["取消", "继续退出"],
            dangerMode: true,
        })
            .then((willDelete) => {
                if (willDelete) {
                    swal('退出成功')
                    location.href = '{% url 'logout_name' %}'
                } else {
                }
            });
    })

    $('#btn1').click(function () {
        $('.right-body').fadeToggle(500);
    })
    $('.btn2').click(function () {
        $('.right-body').fadeToggle(500);
    })
</script>

</body>
</html>